<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="5"></el-col>
            <el-col :span="15">
                <el-form :model="addForm">
                    <el-form-item label="用户类型" :label-width="formLabelWidth">
                        <el-select v-model="addForm.userType" placeholder="请选择注册类型">
                            <el-option label="出租车位用户" value="2"></el-option>
                            <el-option label="租赁车位用户" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户昵称" :label-width="formLabelWidth">
                        <el-input v-model="addForm.userLogin" autocomplete="off" placeholder="请为您的账户取一个昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="用户手机" :label-width="formLabelWidth">
                        <el-input v-model="addForm.userTel" autocomplete="off" placeholder="请输入您的手机号码(登陆时使用）"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码" :label-width="formLabelWidth">
                        <el-input v-model="addForm.userPassword" autocomplete="off" placeholder="请设置您的密码（登陆时使用）"></el-input>
                    </el-form-item>
                    <el-form-item label="确认用户密码" :label-width="formLabelWidth">
                        <el-input v-model="addForm.userPasswordConfirm" autocomplete="off" placeholder="请确认您的密码"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名" :label-width="formLabelWidth">
                        <el-input v-model="addForm.userName" autocomplete="off" placeholder="请输入您的真实姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号码" :label-width="formLabelWidth">
                        <el-input v-model="addForm.userIdnumber" autocomplete="off" placeholder="请输入您的身份证号码"></el-input>
                    </el-form-item>
                    <el-form-item label="行驶证号码" :label-width="formLabelWidth">
                        <el-input v-model="addForm.userLicense" autocomplete="off" placeholder="请输入您的行驶证"></el-input>
                    </el-form-item>
                    <el-form-item label="车牌号码" :label-width="formLabelWidth">
                        <el-input v-model="addForm.userCarId" autocomplete="off" placeholder="请输入您的车牌号"></el-input>
                    </el-form-item>
                    <el-form-item label="邀请码" :label-width="formLabelWidth">
                        <el-input v-model="addForm.userRegistIsnumber" autocomplete="off" placeholder="请输入其他人分享的邀请码，没有则不填"></el-input>
                    </el-form-item>
                    <!--新增-->
                    <el-form-item>
                        <el-button type="primary" @click="addSubmit">注册</el-button>
                    </el-form-item>
                </el-form>
<!--                <el-button  type="primary" @click="dialogFormVisible = true">点击注册</el-button>-->
<!--                <el-dialog title="请仔细检查您填入的信息，确认无误后提交" :visible.sync="dialogFormVisible">-->
<!--                    &lt;!&ndash;确认信息&ndash;&gt;-->
<!--                    <div slot="footer" class="dialog-footer">-->
<!--                        <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--                        <el-button type="primary" @click="addSubmit">确 定</el-button>-->
<!--                    </div>-->
<!--                </el-dialog>-->
            </el-col>
        </el-row>
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/axios.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            /*新增表单数据*/
            dialogFormVisible: false,
            addForm: {
                userType:'2',
                userLogin: '',
                userTel:'',
                userPassword: '',
                userPasswordConfirm: '',
                userName:'',
                userIdnumber: '',
                userLicense: '',
                userCarId: '',
                userRegistIsnumber:''
            },
            formLabelWidth: '120px'
        },
        methods:{
            addSubmit:function(){
                var vm = this;
                //判断两次密码是否一致
                if((vm.addForm.userPassword!==vm.addForm.userPasswordConfirm)||vm.addForm.userPassword===''){
                    this.$message({
                        message:'确认密码必须与设置的密码相同',
                        type:'error',
                    });
                    return;
                }
                if(vm.addForm.userLogin===""||vm.addForm.userPassword===""||vm.addForm.userPasswordConfirm===""||vm.addForm.userName===""||
                    vm.addForm.userIdnumber===""||vm.addForm.userLicense===""||vm.addForm.userCarId===""){
                    this.$message({
                        message:'不能提交空数据',
                        type:'error',
                    })
                }else{
                    axios.post("/register",{
                        userType:vm.addForm.userType,
                        userLogin: vm.addForm.userLogin,
                        userTel: vm.addForm.userTel,
                        userPassword:vm.addForm.userPassword,
                        userName: vm.addForm.userName,
                        userIdnumber: vm.addForm.userIdnumber,
                        userLicense: vm.addForm.userLicense,
                        userCarId: vm.addForm.userCarId,
                        userRegistIsnumber: vm.addForm.userRegistIsnumber
                    })
                        .then(function(resp){
                            // console.log(resp);
                            if(resp.data.success){
                                vm.$message({
                                    message:'新增成功',
                                    type:'sucess'
                                })
                            }
                        })
                }
            }
        }
    })
</script>
</body>
</html>